<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>Vue组件</title>
		<!-- https://v2.cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88(官网链接) -->
	</head>
	<body>
		<div id="app">
			
<!-- 			props:["item_comp"], -->
<!-- 			将props中的item_comp与template中的item_comp关联起来 -->
			
			<ul>
				
				<my-component v-for="item in items" v-bind:item=item></my-component>			

			</ul>
			
		</div>
		<script>
			//定义一个组件
			Vue.component("my-component", {

				props: ["item"],
				template: '<li>{{item}}</li>'

			})
			var app = new Vue({
				el: '#app',
				data: {
                  items:["11","222","333"]					
				}
			})
		</script>
	</body>
</html>item_comp关联起来